<template>
	<view>
		<view class="backgrd">
			<view class="login" v-show="isAuthorization">
				<view class="login-all">
					<view class="login-all-zh">
						<view class="welcome">Welcome</view>
					</view>
					<view class="login-all-zh">
						<input class="login-all-zh-zh" v-model="username" placeholder-class="pla" focus
							placeholder="账号" />
					</view>
					<view class="login-all-zh">
						<input class="login-all-zh-mm"  placeholder="密码" password="true"
							placeholder-class="pla" />
					</view>
					<view>
						<button class="denglu" plain="true" @click="login">
							立即登录
						</button>
					</view>
					<view class="zhuce">
						<navigator url="/pages/bs/bs">
							<text class="zhuce-text">
								   没有账户？注册。
							</text>
						</navigator>
					</view>
				</view>
				<!-- <view class="zhuce">
					<navigator url="/pages/bs/bs">
						<text class="zhuce-text">
							   没有账户？注册。
						</text>
					</navigator>
				</view> -->
			</view>
			
		</view>
		<view v-show="!isAuthorization">
			<view class="my-header">
				<view class="beijintu1">
					<image src="/static/tabs/beijing.png"></image>
				</view>
				<view class="my-header_logo">
					<view class="my-header_logo-box">
						<image src="/static/tabs/mylogo.png" mode="aspectFill"></image>
					</view>
					<view class="my-header_name">
						你好
					</view>
				</view>
				<view class="my-header_info">
					<text class="my-header_info-title">
						账号id：123456789
					</text>

				</view>
			</view>
			<view class="second" :style="{backgroundImage: 'url('+imageURL+')'}">

				<view class="second-sc">
					<text class="second-sc_sc">
						我的收藏
					</text>
					<text>0</text>
				</view>
				<view class="second-sc">
					<text class="second-sc_sc">
						我的咨询
					</text>
					<text>0</text>
				</view>
				<view class="second-sc">
					<text class="second-sc_sc">
						我的商品
					</text>
					<text>0</text>
				</view>

			</view>
			<view class="third">
				<view class="third-yx">
					买家订单
				</view>
				<view class="third-xy">
					全部订单
				</view>
			</view>
			<view class="buju">
				<view class="buju-bj">
					<view class="cate_item">
						<navigator url="/pages/tymyd/tymyd">
							<image src="/static/p.png"></image>
							<view class="woaini">待支付</view>
						</navigator>
					</view>
					<view class="cate_item">
						<navigator url="/pages/tymyd/tymyd">
							<image src="/static/p.png"></image>
							<view class="woaini">已成交</view>
						</navigator>
					</view>
					<view class="cate_item">
						<navigator url="/pages/tymyd/tymyd">
							<image src="/static/p.png"></image>
							<view class="woaini">待成交</view>
						</navigator>
					</view>
					<view class="cate_item">
						<navigator url="/pages/tymyd/tymyd">
							<image src="/static/p.png"></image>
							<view class="woaini">已取消</view>
						</navigator>
					</view>
					<view class="cate_item">
						<navigator url="/pages/tymyd/tymyd">
							<image src="/static/p.png"></image>
							<view class="woaini">已退款</view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="fuwu">
				<text class="fuwu-zi">
					我的服务
				</text>
			</view>
			<view class="fourth">
				<view class="fourth-T">
					<view class="fourth-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="chuizi">
								<image src="/static/l.png"></image>
							</view>
							<text class="wohenni">卖家中心</text>
						</navigator>
					</view>
					<view class="fourth-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="chuizi">
								<image src="/static/l.png"></image>
							</view>
							<text class="wohenni">联系客服</text>
						</navigator>
					</view>
					<view class="fourth-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="chuizi">
								<image src="/static/l.png"></image>
							</view>
							<text class="wohenni">联系客服</text>
						</navigator>
					</view>
					<view class="fourth-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="chuizi">
								<image src="/static/l.png"></image>
							</view>
							<text class="wohenni">联系客服</text>
						</navigator>
					</view>
				</view>
				<view class="fourth-Y">
					<view class="fourth-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="chuizi">
								<image src="/static/l.png"></image>
							</view>
							<text class="wohenni">联系客服</text>
						</navigator>
					</view>
					<view class="fourth-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="chuizi">
								<image src="/static/l.png"></image>
							</view>
							<text class="wohenni">联系客服</text>
						</navigator>
					</view>
					<view class="fourth-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="chuizi">
								<image src="/static/l.png"></image>
							</view>
							<text class="wohenni">联系客服</text>
						</navigator>
					</view>
					<view class="fourth-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="chuizi">
								<image src="/static/l.png"></image>
							</view>
							<view class="wohenni">联系客服</view>
						</navigator>
					</view>

				</view>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAuthorization: true,
				imageURL: '/static/zcxdsb.png'

			}
		},
		methods: {
			login() {
				this.isAuthorization = false
			}


		}
	}
</script>

<style lang="scss">
	
	page {
		
		background-image: url('/static/bj.jpg');
		/* background-repeat: no-repeat; */
		background-size: cover;
		background-attachment: fixed;
		}
		.zhuce{
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
		}

	.login {
		padding-top: 35%;
		display: flex;
		justify-content: center;
	}

	.welcome {
		display: flex;
		justify-content: center;
		font-size: 50rpx;
		padding-bottom: 40rpx;
		color: black;
	}

	.denglu {
		border-radius: 500rpx;
		font-size: 15rpx;
		margin-top: 10rpx;
		border: 5rpx solid black;
		color: black;

	}

	.login-all-zh {
		/* border:5rpx solid white ; */



	}

	.login-all-zh-zh {
		color: white;
		border: 5rpx solid black;
		margin-top: 10rpx;
		border-radius: 2000px;
		font-size: 45rpx
	}

	.login-all-zh-mm {
		color: white;
		border: 5rpx solid black;
		margin-top: 10rpx;
		border-radius: 2000px;
		font-size: 45rpx
	}

	.pla {
		color: black;
		padding-left: 10rpx;
	}

	.ok {
		color: black;
	}

	page {
		background-color: #f5f5f5;
	}

	.fourth {
		height: 160px;
		width: 100%;
		background-color: #ffffff;
		margin-top: 15px;

		// display: flex;
		// justify-content: space-around;
		.fourth-T {
			display: flex;
			justify-content: space-around;
			padding-top: 12px;

			.fourth-tuwen {
				display: flex;
				align-items: center;

				.chuizi {
					display: flex;
					padding-left: 10px;
					flex-direction: column;

					image {
						width: 40px;
						height: 40px;
					}
				}

				.wohenni {
					font-size: 10px;
				}
			}




		}

		.fourth-Y {
			display: flex;
			justify-content: space-around;

			.chuizi {
				display: flex;
				padding-left: 10px;
				flex-direction: column;

				.wohenni {
					font-size: 100px;
				}

				image {
					width: 40px;
					height: 40px;
				}
			}
		}

	}

	.fuwu {
		margin-top: 15px;

		.fuwu-zi {
			font-size: 17px;
		}
	}

	.buju {
		margin-top: 15px;
		background-color: #ffffff;
		height: 80px;
		width: 100%;

		.buju-bj {
			display: flex;
			justify-content: space-around;

			.cate_item {
				padding-top: 12px;
				flex-shrink: 0;

				.woaini {
					font-size: 10px;
				}

				image {
					width: 40px;
					height: 40px;

				}
			}
		}

		// .cate_item view{
		// 	          width: 100rpx;
		// 	   	      display: flex;
		// 		   }
		// 		   .cate_item{
		// 			  padding-top: 12px;
		// 	          flex-shrink:0;
		// 			  float: left;
		// 			  margin-left:28rpx;
		// 	          margin-right: 20rpx;
		// 			  .1{
		// 				  display: flex;

		// 			  }
		// 			  image{
		// 				  border-radius: 40%;
		// 				  height: 30px;
		// 				  width: 30px;
		// 				  margin-left: 18 rpx;
		// 				  }
		// 			  }

	}


	.third {
		margin-top: 15px;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;

		.third-yx {
			display: flex;
			align-items: center;
			width: 100%;
			font-size: 17px;
			color: #060400;

		}

		.third-xy {
			display: flex;
			flex-wrap: nowrap;
			word-break: keep-all;
			font-size: 12px;
			margin-right: 10px;
		}
	}

	.second {
		background-size: 100% 100%;


		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		height: 60px;
		width: 100%;

		.second-sc {
			padding-top: 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			font-size: 18px;
			color: #ffffff;



		}

	}

	.my-header {
		// display: flex;
		// align-content: flex-start;

		position: relative;
		padding-bottom: 15px;

		.beijintu1 {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0%;
			filter: blur(6px);
			opacity: 0.5;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.my-header_info {
			.my-header_info-title {
				position: absolute;
				top: 60px;
				margin-left: 155rpx;
				font-size: 13px;
			}


		}

		.my-header_logo {

			padding-top: 30px;
			display: flex;
			align-items: flex-start;

			.my-header_logo-box {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				overflow: hidden;
				margin-left: 12px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.my-header_name {
				font-size: 16px;
				margin-left: 14px;


			}
		}
	}
</style>